<template>
<div>
    <el-menu
    :unique-opened='true' :router='true'
  :default-active="activeIndex"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-submenu index=" ">
    <template slot="title" >信息来源选择</template>
     <el-menu-item v-for="pathed in paths" :key="pathed.path" :index="pathed.path" >{{pathed.name }}</el-menu-item>
  </el-submenu>
  <!-- <el-menu-item  >{{pname}}</el-menu-item> -->
</el-menu>

<div>
  <router-view></router-view></div>
</div>
</template>
<script>
  export default {
    data() {
      return {
        paths:[
          {
            "name":'',
            "path":'/page/getinfo/getinfodeviceA'
          },{
             "name":'',
            "path":'/page/getinfo/getinfodeviceB'
          },{
             "name":'',
            "path":'/page/getinfo/getinfodeviceC'
          },{
             "name":'',
            "path":'/page/getinfo/getinfodeviceD'
          }
        ],
        activeIndex: '1',
        pname:''
      };
    },
    created: function () {
    // `this` 指向 vm 实例
    for(let i=0;i<this.$store.state.inf.length;i++){
      this.paths[i].name=this.$store.state.inf[i].name;
    }
  },
    methods: {
      handleSelect(key, keyPath) {
        for(let i=0;i<this.$store.state.inf.length;i++){
      if(key==this.$store.state.inf[i].path){
        pname=this.$store.state.inf[i].name;
      }
    }
      }
    }
  }
</script>